<template>
	<view class="card-wrap"  :style="calcWrapStyles" v-if="data.cardList?.length>0">
		
		<view class="card" :style="calcBgImg(index)" @click="cardClick(item)" v-for="(item,index) in data.cardList" :key="index">
			<view class="title">{{item.txt}}</view>
			<view class="goods-list">
				<template v-if="cardList(index).length>0">
					<view class="goods" v-for="(it,ind) in cardList(index)" :key="ind" @click="goodClick(it)">
						<image class="goods-img" :src="sheep.$url.cdn(it.image)"></image>
						<view class="goods-price"><text class="money">￥</text><text class="amount">{{it.price[0]}}</text></view>
					</view>
				</template>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
			reactive,			
			ref,
			onMounted,
			computed,
			
		} from 'vue';
	import sheep from '@/sheep';
	
	import _ from "lodash"
	
	const screenWidth = ref(0);
	
	const calcBgImg = (ind)=>{
		let url = sheep.$url.cdn(props.data.cardList[ind]?.bgImage);
		
		return {
			backgroundImage: `url(${url})`,
			backgroundSize: "100% 100%",
			backgroundOrigin: "padding-box",
			borderRadius:`${props.data.borderRadiusTop}rpx ${props.data.borderRadiusTop}rpx ${props.data.borderRadiusBottom}rpx ${props.data.borderRadiusBottom}rpx`
		}
	}
	
	const calcWrapStyles = computed(()=>{
		
		let sp =props.data.space==0 ?'100%':(screenWidth.value - parseInt(props.data.space)*2-10)+'rpx';
		
		return {
			padding:props.data.space+'rpx',
			height:(280+parseInt(props.data.space)*2)+'rpx',
			
		}
	})

	const cardList = (ind)=>{
		return props.data.cardList[ind]?.goodsList;
	}
	

	const props = defineProps({
		data:{
			type: Object,
			default: () => ({}),
		},
		styles: {
		  type: Object,
		  default: () => ({}),
		},
	})
	
	const cardClick=(item)=>{
		sheep.$router.go(item.url)
	}
	
	const goodClick=(item)=>{
		sheep.$router.go("/pages/goods/index?id="+item.id);
	}
	
	onMounted(()=>{
		
		uni.getSystemInfo({
		  success: function (info) {
		    screenWidth.value = info.windowWidth;
		  }
		});
	})
	
</script>

<style lang="scss" scoped>
.card-wrap{
	
	display: flex;
	justify-content: space-around;
	align-items: center;
	
	
	.card{
		height: 100%;
		
		
		.title{
			height:32rpx;
			width: calc(100% - 28rpx);
			font-family: PingFang SC;
			font-size: 24rpx;
			line-height: 32rpx;
			letter-spacing: 0.5rpx;
			color: #FFFFFF;
			
			margin-left: 28rpx;
			margin-top: 12rpx;
			
		}
		.goods-list{
			height:calc(100% - 90rpx);
			width:340rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			margin-top: 40rpx;
			
			.goods{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.goods-img{
					width:124rpx;
					height:124rpx;	
					border-radius:10rpx;
					
				}
				.goods-price{
					font-family: PingFang SC;
					font-size: 20rpx;
					font-weight: normal;
					line-height: normal;
					color: #FF5858;
					
					background: #FFDADA;
					height:30rpx;
					
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding:4rpx;
					margin-top:6rpx;
					
					width:120rpx;
					.money{
						font-size: 24rpx;
					}
					.amount{
						font-size:  18rpx;
					}
					
						
				}
			}
			
		}
		
		
		
	}
	
	// .card:nth-child(1){
	// 	margin-left:16rpx;
	// }
	
	// .card:nth-child(2){
	// 	margin-right:16rpx;
	// }
	
	
	
	
	
	

	
}
</style>
